<template>
  <!--  用户行为路径-->
  <div id="index">
    <div class="crumbs">
      <chart-dialog
        :dialogData="dialogData"
        v-if="dialogVisible"
        @changeStateDialog="changeStateDialog"
      ></chart-dialog>

      <!--      头部标题加标识-->
      <header class="crumbs_arr_box">
        <span>用户行为路径</span>
        <span class="tool_main">
          <!-- 保存弹框页面-->
          <!--          <preser-vation></preser-vation>-->
          <!--          <i class="fgf"></i>-->
          <div class="rec-wrap">
            <i class="el-icon-refresh" style="font-size: 16px"></i>
            <div class="record" style="border: 1px solid #cccccc">
              <p style="background-color: #dcdfe6">更新时间: 6-30 22:50:37</p>
              <p>仅刷失效数据</p>
              <p>刷新全部数据</p>
            </div>
          </div>

          <el-tooltip
            class="tool_son"
            effect="light"
            content="下载数据"
            placement="bottom"
          >
            <i class="el-icon-download"></i>
          </el-tooltip>
          <!--          <el-popover placement="bottom" width="300" v-model="visible">-->
          <!--            <div class="block_tool">-->
          <!--              <span class="left">抽样设置：</span>-->
          <!--              <el-slider :min="1" :step="1" :max="7" class="right" :show-tooltip="false"></el-slider>-->
          <!--              <span style="display: flex;justify-content: flex-end">全量</span>-->
          <!--              <div class="button" style="display: flex;justify-content: flex-end;margin-top:10px">-->
          <!--                <el-button style="height: 30px;line-height: 5px;font-size: 12px;border: none;"-->
          <!--                           @click="visible=false">取消</el-button>-->
          <!--                <el-button style="height: 30px;line-height: 5px;font-size: 12px" type="success">确认</el-button>-->
          <!--              </div>-->
          <!--            </div>-->
          <!--            <i class="el-icon-more tool_son" slot="reference"></i>-->
          <!--          </el-popover>-->
        </span>
      </header>

      <div class="content-main">
        <div class="statis">
          <span>按顺序配置后进行查询</span>
          <div class="screen">
            <i class="el-icon-timer"></i>
            配置
          </div>
        </div>

        <div class="involved">
          <div class="joinE">
            <span style="margin-right: 15px">参与分析的事件</span>
            <div>
              <el-button
                size="small"
                icon="el-icon-full-screen"
                @click="eventDialog = true"
                >{{ eventList.length }}个</el-button
              >
              <ml-category-filtering
                v-if="eventDialog === true"
                v-clickoutside="handleClickOutSide"
                @selectItem="selectItem"
                :origin="0"
                :eventList="eventList"
                :tabsHeadParams="readHeads"
                :tabsBodyParams="readBodys"
              ></ml-category-filtering>
            </div>
            <el-button
              class="filter-button"
              type="text"
              icon="el-icon-plus"
              size="midden"
              :disabled="filterList.length >= eventList.length"
              @click="addFilter()"
              >筛选或分组
            </el-button>
          </div>

          <template v-for="(item, index) in filterList">
            <div class="joinE" style="margin-top: 8px" :key="index">
              <span style="margin-right: 15px; visibility: hidden"
                >参与分析的事件</span
              >
              <div>
                <el-button
                  size="small"
                  icon="el-icon-full-screen"
                  @click="item.show = true"
                  :disabled="filterList.length === eventList.length"
                  >{{ filterListOrder[index].cname }}</el-button
                >
                <ml-event-filtering
                  v-if="item.show === true"
                  v-clickoutside="handleClickOutSide"
                  @selectItemFilter="selectItemFilter"
                  :origin="index"
                  :tabsHeadParams="readHeads"
                  :tabsBodyParams="filterListSurplus"
                ></ml-event-filtering>
              </div>
              <span class="an">按</span>
              <div>
                <el-button
                  size="small"
                  icon="el-icon-full-screen"
                  @click="item.propertyShow = true"
                  >{{
                    item.property.cname ? item.property.cname : "总体"
                  }}</el-button
                >
                <ml-property-filtering
                  v-if="item.propertyShow === true"
                  v-clickoutside="handleClickOutSide"
                  @selectItemProperty="selectItemProperty"
                  :origin="index"
                  :tabsHeadParams="['事件属性']"
                  :supName="filterListOrder[index].eventId"
                ></ml-property-filtering>
              </div>

              <span class="an">查看</span>
              <el-button
                type="text"
                icon="el-icon-close"
                size="midden"
                @click="deleteFilter(index)"
              >
              </el-button>

              <el-button
                type="text"
                icon="el-icon-plus"
                size="midden"
                @click="editCond(index)"
                >筛选
              </el-button>
            </div>
            <ml-custom-screen
              :ref="`customScreenRef${index}`"
              :supName="filterListOrder[index].eventId"
              :isSupName="true"
              :key="index"
            ></ml-custom-screen>
          </template>
        </div>

        <div class="involved">
          <div class="joinE">
            <span>选择起始/结束事件</span>
            <div style="margin: -5px 15px">
              <el-radio-group v-model="seEvent" size="small">
                <el-radio-button label="initial_event"
                  >起始事件</el-radio-button
                >
                <el-radio-button label="termination_event"
                  >结束事件</el-radio-button
                >
              </el-radio-group>
            </div>
            <span>为</span>

            <div class="an">
              <el-button
                size="small"
                icon="el-icon-full-screen"
                @click="startEndDialog = true"
                >{{ startEndEvent.cname || "请选择" }}</el-button
              >
              <ml-startend-filtering
                v-if="startEndDialog === true"
                v-clickoutside="handleClickOutSide"
                @startEndFiltering="startEndFiltering"
                :tabsHeadParams="readHeads"
                :tabsBodyParams="[{ list: eventList }]"
              ></ml-startend-filtering>
            </div>

            <el-button
              type="text"
              icon="el-icon-plus"
              size="midden"
              @click="selEvent()"
              >筛选
            </el-button>
          </div>

          <ml-custom-screen
            ref="customScreenRefTwo"
            :supName="startEndEvent.eventId"
            :isSupName="true"
          ></ml-custom-screen>
        </div>

        <div class="involved">
          <div class="joinE">
            <span style="margin-right: 15px">且用户符合</span>
            <el-button
              type="text"
              icon="el-icon-plus"
              size="midden"
              @click="userCompliance()"
              >筛选
            </el-button>
          </div>
          <ml-custom-screen
            ref="customScreenRefThree"
            :isEvent="'false'"
          ></ml-custom-screen>
        </div>

        <div class="involved">
          <div class="joinE">
            <span>设置 Session 间隔</span>
            <div style="width: 200px; margin: 0 15px">
              <el-radio-group v-model="timeInterval" style="display: flex">
                <el-input-number
                  v-model="num"
                  controls-position="right"
                  size="small"
                  :min="1"
                ></el-input-number>
                <el-select
                  v-model="value"
                  size="small"
                  style="margin-left: 10px"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-radio-group>
            </div>
            <div style="margin-left: 10px; position: absolute; right: 30px">
              <el-button
                type="primary"
                :icon="icon"
                :disabled="isDoCompute !== 0"
                size="small"
                style="width: 192px"
                @click="calculate()"
                >分析计算
                <template v-if="icon === 'el-icon-loading'"
                  >({{ backTime }}s)</template
                >
              </el-button>
            </div>
          </div>
        </div>
      </div>

      <!--      图表-时间选择器-->
      <div class="Chart">
        <!--        时间选择-->
        <div class="timeSelect">
          <div class="timeLeft">
            <timeRestrict
              :oldTime="dateS"
              :timeRestrict="timeRestrict"
              @change="dateSChange"
            ></timeRestrict>
          </div>

          <div class="timeRight">
            <div>
              <span>每层最多显示</span>
              <el-input-number
                style="width: 100px; margin: -10px 10px 0 10px"
                v-model="packing"
                controls-position="right"
                :min="7"
              ></el-input-number>
              <span style="margin-right: 10px">个节点</span>
            </div>
            <div style="display: flex">
              <el-divider direction="vertical"></el-divider>
              <div class="export">
                <i class="el-icon-printer"></i>
                导出
              </div>
            </div>
          </div>
        </div>

        <el-container>
          <div
            id="chart"
            class="chartStyle"
            :initChartViewData="initChartViewData"
          ></div>
        </el-container>
      </div>
    </div>
  </div>
</template>

<script>
//组件
import timeSelect from "./timeSelect";
import DataTypeConfig from "./dataType.config";
import PreserVation from "../funnelAnalysis/preserVation";
//引入图表弹框
import chartDialog from "./chartDialog";
//筛选控件
import CustomScreen from "./customScreen";
//当鼠标点击了指令所绑定元素的外部时，就会触发绑定方法所需要的控件
import Clickoutside from "element-ui/src/utils/clickoutside";
//接口
import { thinglList, userpathCount, propertyList } from "./userpath";
//参与分析事件下拉框
import CategoryFiltering from "./categoryFiltering";
//参与分析事件筛选下拉框
import EventFiltering from "./eventFiltering";
//参与分析事件筛选属性下拉框
import PropertyFiltering from "./propertyFiltering";
//开始结束下拉框
import startEndFiltering from "./startEndFiltering";
//按需引入
import * as echarts from "echarts/core";
import { SankeyChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([SankeyChart, CanvasRenderer]);

export default {
  /*当点击控件外时 触发 element-ui自定义指令*/
  directives: { Clickoutside },
  name: "index",
  components: {
    PreserVation,
    timeSelect,
    chartDialog,
    "ml-custom-screen": CustomScreen,
    "ml-category-filtering": CategoryFiltering,
    "ml-event-filtering": EventFiltering,
    "ml-property-filtering": PropertyFiltering,
    "ml-startend-filtering": startEndFiltering,
  },
  data() {
    return {
      /* 点击分析计算切换图表 */
      icon: "el-icon-search",
      /* 参与分析事件下拉框展示 */
      eventDialog: false,
      /* 起始/结束事件下拉框*/
      startEndDialog: false,
      /* 起始/结束事件*/
      startEndEvent: {},
      /* 参与分析事件数组*/
      eventList: [],
      /* 分析计算倒计时*/
      backTime: 60,
      dateS: [], // 开始时间段
      /* 是否正在计算中*/
      isDoCompute: 0,
      //发送请求之后接收的数据
      initChartViewData: {},
      //弹窗所需要的数据
      dialogData: {},
      //是否显示弹框
      dialogVisible: false,
      /* 当前参与分析事件筛选数组 */
      filterList: [],
      /* 分析事件筛选展示顺序*/
      filterListOrder: [],
      /* 分析事件可选替换数组*/
      filterListSurplus: [{ list: [] }],
      catchout: "",
      search: "",
      originList: [], //源数据
      initEventGroupDetail: [], //搜索前
      selectVal: "", //搜索关键字
      selftwoGroup: [],
      initVal: "",

      frameList: [],
      toolShow: false,

      value: "分钟",
      visible: false,
      seEvent: "initial_event",
      timeInterval: "",
      input: "",
      num: 20,
      packing: 7,
      options: [
        {
          value: "秒",
          label: "秒",
        },
        {
          value: "分钟",
          label: "分钟",
        },
        {
          value: "小时",
          label: "小时",
        },
      ],

      chodate: [], //时间
      readHeads: ["默认"],
      readBodys: [],
      timeRestrict: {
        function: "absolute_time",
        params: [this.getBeforeDate(2), this.getBeforeDate()],
      }, // 动态时间参数

      startDate: this.getBeforeDate(2),
      endDate: this.getBeforeDate(),
    };
  },
  mounted() {
    new Promise((resolve, reject) => {
      let params = {};
      params["req"] = {};
      params["operationCtx"] = {};
      thinglList(params).then((res) => {
        if (res.data.success !== true) {
          t.$message.error(res.data.errorMessage);
          return;
        }
        this.originList = JSON.parse(JSON.stringify(res.data.value.list));
        this.readBodys.push(res.data.value);
        this.initEventGroupDetail = this.originList;
      });
    });
  },
  watch: {},
  methods: {
    //  追加对比 时间函数
    timeContrast(v) {
      let arr = [0, 0];
      // 同段时间
      if (v == "1") {
        let c = new Date(this.dateS[1]) - new Date(this.dateS[0]);
        arr[1] = new Date(this.dateS[0]) - 24 * 60 * 60 * 1000;
        arr[0] = arr[1] - c;
      }
      // 自定义时间
      if (v == "2") {
        arr[0] = new Date(this.dateS[0]) - 24 * 60 * 60 * 1000;
        arr[1] = new Date(this.dateS[1]) - 24 * 60 * 60 * 1000;
      }
      this.dateD = arr;
    },
    dateSChange(newValue) {
      let { sendTimeArr, timeRestrict } = newValue;
      this.timeRestrict = timeRestrict;
      this.dateS = [sendTimeArr[0], sendTimeArr[1]];
      this.startDate = sendTimeArr[0];
      this.endDate = sendTimeArr[1];
      let contrastStartDate = null;
      let contrastEndDate = null;
      if (this.dateD && this.dateD[0]) {
        let date = new Date(this.dateD[0]);
        let year = date.getFullYear();
        let mon = date.getMonth() + 1;
        let day = date.getDate();
        contrastStartDate = year + "-" + mon + "-" + day;
      }
      if (this.dateD && this.dateD[1]) {
        let date = new Date(this.dateD[1]);
        let year = date.getFullYear();
        let mon = date.getMonth() + 1;
        let day = date.getDate();
        contrastEndDate = year + "-" + mon + "-" + day;
      }

      // this.$emit("conversion", {
      //   unit: this.unit,
      //   startDate,
      //   endDate,
      //   contrastStartDate,
      //   contrastEndDate,
      //   timeRestrict    // 动态时间配置集合
      // });
    },
    //增加筛选和分组
    addFilter() {
      this.filterList.push({ show: false, propertyShow: false, property: {} });

      //删除可选项
      let id = this.filterListOrder[this.filterList.length - 1].id;
      for (let i = 0; i < this.filterListSurplus[0].list.length; i++) {
        if (id === this.filterListSurplus[0].list[i].id) {
          this.filterListSurplus[0].list.splice(i, 1);
        }
      }
    },
    //点击外部时 关闭所有选择框
    handleClickOutSide() {
      this.filterList.forEach((item) => {
        item.show = false;
        item.propertyShow = false;
      });
      this.search = "";
      this.catchout = "";
      this.toolShow = false;
      this.eventDialog = false;
      this.startEndDialog = false;
      this.$forceUpdate();
    },
    /* 选择属性 */
    selectItem(mes, eventList, status) {
      if (status === true) {
        this.filterList = [];
        this.eventList = JSON.parse(JSON.stringify(eventList));
        this.filterListOrder = JSON.parse(JSON.stringify(eventList));
        this.filterListSurplus[0].list = JSON.parse(JSON.stringify(eventList));
        this.startEndEvent =
          eventList.length !== 0
            ? JSON.parse(JSON.stringify(eventList))[0]
            : {};
      }
      this.eventDialog = false;
      this.$forceUpdate();
    },
    //弹框状态发生改变
    changeStateDialog(val, oldVal) {
      this.dialogVisible = val;
    },
    //图表
    initChartView(t) {
      t = this;
      let myChart = this.$echarts.init(document.getElementById("chart"));
      let option = DataTypeConfig.optionTemplate;
      option.series[0].data = [];
      option.series[0].links = [];
      myChart.clear();
      t.initChartData(option, t);
      myChart.setOption(option);
      myChart.on("click", function (param) {
        let data = { table: [] };
        data["name"] = param.data.label.formatter.substring(
          param.data.label.formatter.indexOf("|") + 1,
          param.data.label.formatter.indexOf("}")
        );
        for (let i = 0; i < option.series[0].data.length; i++) {
          if (param.data.name === option.series[0].data[i].name) {
            data["total"] = option.series[0].data[i].label.formatter.substring(
              option.series[0].data[i].label.formatter.lastIndexOf("|") + 1,
              option.series[0].data[i].label.formatter.length - 1
            );
            data["detail"] = option.series[0].data[i].label.rich.data;
            for (let k = 0; k < option.series[0].links.length; k++) {
              if (
                param.data.name === option.series[0].links[k].source &&
                option.series[0].links[k].target.indexOf("wastage") === -1
              ) {
                data["table"].push(option.series[0].links[k]);
              }
            }
          }
        }
        t.dialogData = data;
        t.dialogVisible = true;
        //param.name x轴值,param.data y轴值
        t.$forceUpdate();
      });
    },
    getBeforeDate(number) {
      let num = number;
      let date = new Date();

      let year = date.getFullYear();
      let mon = date.getMonth() + 1;
      let day = date.getDate();

      if (typeof num === "number") {
        if (day <= num) {
          if (mon > 1) {
            mon = mon - 1;
          } else {
            year = year - 1;
            mon = 12;
          }
        }

        date.setDate(date.getDate() - num);

        year = date.getFullYear();
        mon = date.getMonth() + 1;
        day = date.getDate();
      }

      return (
        year +
        "-" +
        (mon < 10 ? "0" + mon : mon) +
        "-" +
        (day < 10 ? "0" + day : day)
      );
    },
    initChartData(option, t) {
      //当前选中颜色的数组
      let chartColorMap = JSON.parse(JSON.stringify({}));
      //存储颜色的数组
      let colorMap = JSON.parse(JSON.stringify(DataTypeConfig.color));
      let data = t.initChartViewData;
      let nodes = data.nodes;
      let links = data.links;
      let eventDetail = t.initEventGroupDetail;
      for (let i = 0; i < nodes.length; i++) {
        for (let j = 0; j < nodes[i].length; j++) {
          let byValues = "";
          let name = "";
          //获取当前name的中文名称
          let eventId = nodes[i][j].eventId;
          if (nodes[i][j].byValues !== null) {
            byValues = nodes[i][j].byValues;
          }
          for (let k = 0; k < eventDetail.length; k++) {
            if (eventDetail[k].eventId === eventId) {
              name = eventDetail[k].cname;
              break;
            }
          }
          //如果是按事件结尾会有一个more属性
          if ("more" === eventId) {
            name = "更多";
          }

          //获取当前name的颜色
          if (chartColorMap[name] === undefined) {
            let index = 0;
            let minNum = 0;
            for (let k = 0; k < colorMap.length; k++) {
              if (minNum <= colorMap[k].num) {
                minNum = colorMap[k].num;
                index = k + 1;
              }
            }
            index = index % colorMap.length;
            colorMap[index].num += 1;
            chartColorMap[name] = colorMap[index].color;
          }
          let styleColor = chartColorMap[name];

          //获取当前显示的数值
          let times = nodes[i][j].times;
          let wastage = 0;
          //计算留存与流失
          let id = nodes[i][j].id;
          for (let k = 0; k < links[i].length; k++) {
            if (links[i][k].source === id && links[i][k].isWastage === true) {
              wastage = links[i][k].times;
            }
          }

          for (let k = 0; k < i; k++) {
            id += " ";
          }

          option.series[0].data.push({
            name: id,
            depth: i,
            itemStyle: { color: styleColor },
            label: {
              // 在文本中，可以对部分文本采用 rich 中定义样式。
              // 这里需要在文本中使用标记符号：
              // `{styleName|text content text content}` 标记样式名。
              // 注意，换行仍是使用 '\n'。
              formatter: [
                "{a|" + name + "  " + byValues + "}",
                "{b|" + times + "}",
              ].join("\n"),

              rich: {
                a: {
                  fontSize: 12,
                  fontFamily: "Microsoft YaHei",
                  borderColor: "#449933",
                  borderRadius: 4,
                },
                b: {
                  marginTop: 3,
                },
                x: {
                  fontSize: 18,
                  fontFamily: "Microsoft YaHei",
                  borderColor: "#449933",
                  borderRadius: 4,
                },
                data: {
                  storageNum: times - wastage,
                  storagePer:
                    Math.floor(((times - wastage) / times) * 100 * 100) / 100,
                  wastageNum: wastage,
                  wastagePer: Math.floor((wastage / times) * 100 * 100) / 100,
                },
              },
            },
          });
        }
      }

      let max = this.getMaxV(links);
      let min = this.getMinV(links);
      console.log(links);
      for (let i = 0; i < links.length; i++) {
        for (let j = 0; j < links[i].length; j++) {
          let source = links[i][j].source;
          let target = links[i][j].target;

          /*通过截取字符串获取线起始的eventId*/

          let sourceEventId = "";
          sourceEventId = this.getEventIdByST(source);

          let targetEventId = "";
          targetEventId = this.getEventIdByST(target);

          let lineText = "";
          for (let k = 0; k < eventDetail.length; k++) {
            if (eventDetail[k].eventId === sourceEventId) {
              lineText = eventDetail[k].cname;
              break;
            }
          }
          if (sourceEventId === "more") {
            lineText = "更多";
          }
          for (let k = 0; k < eventDetail.length; k++) {
            if (eventDetail[k].eventId === targetEventId) {
              lineText = lineText + " 到 " + eventDetail[k].cname;
              break;
            }
          }
          if (targetEventId === "more") {
            lineText = lineText + " 到 更多";
          }

          for (let k = 0; k < i; k++) {
            source += " ";
          }
          for (let k = -1; k < i; k++) {
            target += " ";
          }

          //真实的数量
          let times = links[i][j].times;
          //用于图表显示的大小
          let value = this.normalization(times, max, min);
          value = Math.sqrt(Math.sqrt(value));
          //计算比例
          //获取源对象名
          let name = links[i][j].source;
          let sourceValue = 1;
          let sourcePre = 1;
          for (let k = 0; k < nodes[i].length; k++) {
            if (nodes[i][k].id === name) {
              sourceValue = nodes[i][k].times;
              break;
            }
          }
          (sourcePre = Math.floor((times / sourceValue) * 100 * 100) / 100),
            option.series[0].links.push({
              source: source,
              target: target,
              value: value,
              valueShow: times,
              sourcePre: sourcePre,
              lineStyle: {
                color: "source",
              },
              lineText: lineText,
            });
        }
      }
    },
    //根据source或者target获取eventId
    getEventIdByST(source) {
      let sourceEventId = "";
      let sourceStr = source.split("-")[1];
      if (sourceStr === undefined) {
        debugger;
      }
      let sourceStrTp = sourceStr.substring(1, sourceStr.length);
      if (sourceStrTp.split("_").length === 1) {
        sourceEventId = sourceStr;
      } else {
        sourceEventId = "_" + sourceStr.split("_")[0];
      }
      return sourceEventId;
    },
    // 获取最大值
    getMaxV(links) {
      let max = 100;
      for (let i = 0; i < links.length; i++) {
        for (let j = 0; j < links[i].length; j++) {
          if (max < links[i][j].times) max = links[i][j].times;
        }
      }
      return max;
    },
    // 获取最小值
    getMinV(links) {
      let min = 1000000;
      for (let i = 0; i < links.length; i++) {
        for (let j = 0; j < links[i].length; j++) {
          if (min > links[i][j].times) min = links[i][j].times;
        }
      }
      return min;
    },
    normalization(distribution, max, min) {
      let normalizationRatio = (distribution - min) / (max - min);
      if (normalizationRatio === 0) {
        normalizationRatio = 1 / (max - min);
      }
      return normalizationRatio;
    },

    /* 添加筛选 */
    editCond(index) {
      this.$refs[`customScreenRef${index}`][0].editCond();
    },

    /*选择筛选分组里面的某一条*/
    selectItemFilter(origin, item) {
      let id = item.id;

      //替换已选和接下来默认的顺序
      let afterIndex = 0;
      for (let i = 0; i < this.filterListOrder.length; i++) {
        if (id === this.filterListOrder[i].id) {
          afterIndex = i;
        }
      }
      let cov = this.filterListOrder[origin];
      this.filterListOrder[origin] = item;
      this.filterListOrder[afterIndex] = cov;

      //把属性重新设置为总体
      this.filterList[origin].property = {};

      //替换剩下可选的数值
      let surplus = this.filterListSurplus[0].list;
      surplus = JSON.parse(JSON.stringify(this.eventList));
      let list = [];
      for (let i = 0; i < this.filterList.length; i++) {
        for (let j = 0; j < surplus.length; j++) {
          if (this.filterListOrder[i].id === surplus[j].id) {
            list.push(j);
          }
        }
      }
      list = this.sort(list);
      for (let i = list.length - 1; i > -1; i--) {
        surplus.splice(list[i], 1);
      }
      this.filterListSurplus[0].list = surplus;

      //关闭
      this.handleClickOutSide();
    },
    /*选择筛选分组里面的某一条的属性*/
    selectItemProperty(origin, item) {
      this.filterList[origin].property = item;
      this.handleClickOutSide();
    },
    /* 删除参与分析事件筛选*/
    deleteFilter(index) {
      //删除所选的那一条
      let item = this.filterListOrder.splice(index, 1);
      this.filterListOrder.push(item[0]);
      this.filterList.splice(index, 1);

      //替换剩下可选的数值
      let surplus = this.filterListSurplus[0].list;
      surplus = JSON.parse(JSON.stringify(this.eventList));
      let list = [];
      for (let i = 0; i < this.filterList.length; i++) {
        for (let j = 0; j < surplus.length; j++) {
          if (this.filterListOrder[i].id === surplus[j].id) {
            list.push(j);
          }
        }
      }
      list = this.sort(list);
      for (let i = list.length - 1; i > -1; i--) {
        surplus.splice(list[i], 1);
      }
      this.filterListSurplus[0].list = surplus;
    },
    /* 开始于结束事件的选择*/
    startEndFiltering(item) {
      this.startEndEvent = item;
      this.handleClickOutSide();
    },
    /* 数组排序*/
    sort(a) {
      //排序大小
      let i = 0,
        j = 0,
        t = 0;
      for (i = 0; i < a.length; i++) {
        for (j = 0; j < a.length; j++) {
          if (a[i] < a[j]) {
            // 相邻元素两两对比
            t = a[i];
            a[i] = a[j];
            a[j] = t;
          }
        }
      }
      return a;
    },

    queryData2() {
      this.selftwoGroup = this.selectVal.filter(
        (item) => item.cname.indexOf(this.search) >= 0
      );
    },
    queryData3() {
      this.frameList = this.initVal.filter(
        (item) => item.cname.indexOf(this.catchout) >= 0
      );
    },

    //选择起始/结束事件--筛选
    selEvent() {
      this.$refs.customScreenRefTwo.editCond();
    },
    //且用户符合--筛选
    userCompliance() {
      this.$refs.customScreenRefThree.editCond();
    },
    //时间选择器
    timeUnity(time) {
      this.chodate = time;
      console.log(this.chodate, 99);
    },

    //分析计算
    calculate() {
      let t = this;

      //选择起始/结束事件--筛选
      let filters = this.$refs.customScreenRefTwo.getFilterConditions();

      //且用户符合--筛选
      let userFilter = this.$refs.customScreenRefThree.getFilterConditions();

      //事件分组数组
      let byFields = [];

      let eventIds = [];
      if (this.eventList.length === 0) {
        this.$message.warning("请先选择分析事件组");
        return;
      }

      this.eventList.forEach((item) => {
        eventIds.push(item.eventId);
      });

      this.filterList.forEach((item, index) => {
        if (item.property.name && item.property.name !== "") {
          let fieldsItem = `event.${this.filterListOrder[index].eventId}.${item.property.name}`;
          byFields.push(fieldsItem);
        }
      });

      let singleEventWithFilters = {};
      this.filterList.forEach((item, index) => {
        let eventId = this.filterListOrder[index].eventId;
        singleEventWithFilters[eventId] =
          this.$refs[`customScreenRef${index}`][0].getFilterConditions();
      });

      //设置session间隔
      let time = 0;
      switch (this.value) {
        case "秒":
          time = this.num;
          break;
        case "分钟":
          time = this.num * 60;
          break;
        case "小时":
          time = this.num * 3600;
          break;
      }

      let params = {
        req: {
          /*请求报文*/
          byFields: byFields,
          colLimit: 20,
          eventIds: eventIds,
          //按钮起始、结束事件
          sourceType: this.seEvent,
          rowLimit: this.packing,
          samplingFactor: 64,
          sessionInterval: time,
          subTaskType: "PATHANALYTICS",
          sourceEvent: {
            eventId: this.startEndEvent.eventId,
            filters: filters,
          },
          singleEventWithFilters: singleEventWithFilters,
          //时间选择器
          fromDate: this.startDate,
          toDate: this.endDate,
          unit: "day",
          userFilter: userFilter,
          requestId: "1627300843978:525360",
        },
        operationCtx: {},
      };

      t.readyBackTime();

      userpathCount(params)
        .then((res) => {
          t.icon = "el-icon-search";
          if (res.data.success !== true) {
            t.$message.error(res.data.errorMessage);
            return;
          }
          t.initChartViewData = res.data.value;
          /*显示图表*/
          t.initChartView(t);
        })
        .catch((error) => {
          t.icon = "el-icon-search";
          t.$message.error(error);
        });
    },

    /*准备计时器*/
    readyBackTime() {
      let t = this;

      t.isDoCompute = 1;
      /* 替换按钮图标 表示加载中 */
      t.icon = "el-icon-loading";
      t.backTimeNumber();
    },

    /* 分析计算到倒计时*/
    backTimeNumber() {
      if (this.icon !== "el-icon-search") {
        if (this.backTime >= 0) {
          this.backTime--;
          setTimeout(this.backTimeNumber, 1000);
        } else {
          t.$message.error("计算超时");
        }
      } else {
        this.isDoCompute = 0;
        this.backTime = 60;
        return;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#index {
  width: 98%;
  margin: 0 auto;
  box-sizing: border-box;
  height: auto;
  font-size: 14px;
  color: #475669;

  .filter-button {
    margin-left: 20px;
  }
  .chartStyle {
    width: 100%;
    min-height: 600px;
    margin-bottom: 4px;
    border-width: 2px;
    border-radius: 5px;
    border-style: solid;
    border-color: #01b27a;
  }
  .crumbs {
    .crumbs_arr_box {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .tool_main {
        padding: 0 0.5rem 0 10px;
        font-size: 12px;
        font-weight: 500;
        color: #606266;
        letter-spacing: 2px !important;

        .select {
          margin: 0 6px;
        }

        .fgf {
          display: inline-block;
          width: 1px;
          height: 16px;
          background: #c0c4cc;
          margin: 0 8px;
        }

        .rec-wrap {
          position: relative;

          .record {
            width: 200px;
            height: auto;
            position: absolute;
            left: -100px;
            top: 100%;
            background-color: #fff;
            display: none;

            p {
              margin: 0;
              height: 28px;
              line-height: 28px;
            }
          }
        }

        .rec-wrap:hover {
          .record {
            display: block;
          }
        }

        .tool_son {
          font-size: 16px;
          margin: 0 8px;
        }

        .tool_son:hover {
          color: #01b27a;
          font-weight: 600;
        }
      }
    }

    .content-main,
    .Chart {
      width: 99%;
      height: auto;
      background-color: white;
      border-radius: 8px;
      margin: auto;
      margin-bottom: 25px;
      box-shadow: 0 2px 11px rgba(190, 202, 218, 0.17);

      .statis {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #e9f0f7;

        span,
        div {
          padding: 15px;
        }

        div {
          &:hover {
            color: #307ef2;
            cursor: pointer;
          }
        }
      }

      .involved {
        padding: 15px;
        border-bottom: 1px solid #e9f0f7;

        .joinE {
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .screen {
            cursor: pointer;
          }
          .an {
            margin-left: 10px;
            margin-right: 10px;
          }
        }
      }

      .polling {
        width: 130px;
        margin: 15px;
        padding: 0 10px;
      }
    }

    .timeSelect {
      display: flex;
      justify-content: space-between;
      padding: 15px;

      .timeRight {
        display: flex;
        justify-content: flex-end;
        margin-top: 10px;

        .export {
          &:hover {
            cursor: pointer;
            color: #00b265;
          }
        }
      }
    }
  }

  .eventGroup {
    font-size: 12px;
  }

  .screen {
    cursor: pointer;
  }

  .steps {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;

    .steps-left {
      .warp,
      .anything {
        position: absolute;
        z-index: 100;
        background-color: #ffffff;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
          0 6px 20px 0 rgba(0, 0, 0, 0.19);
      }

      .stepsone {
        width: 450px;
        height: 400px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
          0 6px 20px 0 rgba(0, 0, 0, 0.19);
      }

      .default {
        display: flex;
        justify-content: flex-start;
        padding-left: 30px;

        .mtxt {
          text-indent: 10px;
          line-height: 20px;
          border-left: 3px solid green;
        }
      }

      .frame {
        overflow-y: scroll;
        max-height: 300px;
        display: flex;
        flex-wrap: wrap;
        position: relative;
      }

      .contentList {
        width: 100%;
        position: absolute;
        text-indent: 30px;
        line-height: 30px;
        cursor: pointer;
        height: 300px;
        overflow-y: scroll;
        margin-top: 10px;
      }
    }

    .steps-right {
      cursor: pointer;
      margin-top: 5px;
    }
  }

  .stepstwo {
    width: 250px;
    height: 350px;
    position: absolute;
    z-index: 100;

    .content {
      overflow-x: auto;
      overflow-y: scroll;
      height: 300px;
    }

    .list {
      width: auto;
      display: flex;
      justify-content: flex-start;
      height: 30px;
      line-height: 30px;

      &:hover {
        border-radius: 4px;
        background-color: #f7f9fa;
      }
    }
  }

  .de-content,
  .content {
    width: 50%;
    position: relative;
    text-indent: 30px;
    line-height: 30px;
    cursor: pointer;

    &:hover {
      border-radius: 4px;
      background-color: #f7f9fa;
    }

    .de-list {
      padding: 0 20px 0 35px;
      cursor: pointer;
    }
  }

  .stepsthree {
    width: 450px;
    height: 350px;
    position: absolute;
    margin-top: 5px;
    z-index: 100;
    background-color: #ffffff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

    .default {
      display: flex;
      justify-content: flex-start;
      padding-left: 30px;

      .mtxt {
        text-indent: 10px;
        line-height: 20px;
        border-left: 3px solid green;
      }
    }

    .frame {
      overflow-y: scroll;
      max-height: 260px;
      display: flex;
      flex-wrap: wrap;
      position: relative;
    }
  }
}
</style>

<style lang="scss" scoped>
::v-deep .el-button--success {
  width: 72px;
  height: 32px;
  font-size: 12px;
  padding: 5px;
}

::v-deep .el-divider--horizontal {
  width: 82%;
  margin-left: 20px;
}

::v-deep .el-input-number .el-input {
  width: 100px;
}
</style>
